import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login/Login.vue'
// @符号在路径中标示src的绝地路径,脚手架为我们配置的
// 导入登录注册组件
import Reg from '@/views/Reg/Reg.vue'
import Main from '@/views/Main/Main.vue'
import store from '@store'
import Home from '@views/Menus/Home/Home.vue'
import UserInfo from '@views/Menus/UserInfo/UserInfo.vue'
Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
// 声明路由规则
const routes = [
  { path: '/login', component: Login },
  { path: '/reg', component: Reg },
  { path: '/reg', component: Reg },
  {
    path: '/',
    component: Main,
    redirect: '/home',
    children: [
      {
        path: 'home',
        component: Home
      },
      {
        path: 'user-info',
        component: UserInfo
      }
    ]
  }
]

const router = new VueRouter({
  routes
})
/*
使用导航守卫,进行未登录的权限控制
to:到哪儿去
from:从哪里来
next:是否放行,函数,调用不传参表示放行,调用传入false表示不放行,传入path可以强行跳转至指定路径
*/
router.beforeEach((to, from, next) => {
  /*
  在特定条件下强制跳转至/login
  条件1:未登录,没有token
  条件2:要去的页面不是/login和//reg(白名单)
  如果未登录是允许访问的页面很多,需要在后面继续加&&判断条件,这样代码美观度较低,语法也不够精简.
  if(!store.state.user.token && to.path !== '/login' && to.path !== '/reg'){
    白名单:不管登录的还是未登录的都可以访问的页面
    高级代码: */
  const whiteList = ['/login', '/reg']
  // includes:包含,判断指定的元素是否在数组中
  if (!store.state.user.token && !whiteList.includes(to.path)) {
  // 给用户一个提示
    Vue.prototype.$message.error('您未登录!')
    return next('/login')
  }
  next()
})
export default router
